{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}
<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>
<div id="container" style="width: 600px; height: 400px;"></div>
<h6>代码</h6>
<pre>
jQuery 请求json数据 返回 对象 转数组
页面
&lt;div id="container" style="width: 600px; height: 400px;"&gt;&lt;/div&gt;

js

&lt;script src="__ROOT__/static/js/echarts.js"&gt;&lt;/script&gt;
&lt;script language="javascript"&gt;

	// 初始化两个数组，盛装从数据库中获取到的数据

	var names = [];
	var ages = [];

	// console.log('查看1');
	// console.log(this.names);  可以看到全局函数
	//调用ajax来实现异步的加载数据
	function getusers() {
		$.ajax({
			type: "post",
			async: false,
			url: "../../js/Index2/index", // 测试时 这个通
			//url: "../../Index2/index",      //网站里 这个不通
			data: {},
			dataType: "json",
			success: function (result) {
				//console.log(result);
				//json 对象转数组  {"name":["何发给1","何发给1","何发给13stt","何发给13stt","何发给13stt","何发给","何发给"],"age":[100,100,100,25,100,100,100]}
				// console.log('看不到');
				// console.log(this.names);  看不到全局函数

				var dxnames = result['name'];   // 这是对象
				var dxage = result['age'];   // 这是对象
				//  console.log(dxnames.length);   可以查对象的长度
				for (var i = 0; i &lt; dxnames.length; i++) {
					names.push(dxnames[i]);            //添加到 叫names 的对象里去
				}
				for (var i = 0; i &lt; dxage.length; i++) {
					ages.push(dxage[i]);
				}
				// var dxnames = result['name'][0];   // 这是对象 转字符串
				// var names =  JSON.parse(dxnames);   无法对象转数组
			}
		});
		//ajax 调用数据结束


		console.log('错无');
                   console.log(url);
		console.log(names);
		console.log(ages);
		// console.log(typeof(names)); 这里应该是对象 
		return names, ages;

	}
	// 执行异步请求
	getusers();
	//  console.log('查看');
	//  console.log(this.names);   // 可以看到全局函数
	//  console.log(names);


	// 初始化 图表对象
	var mychart = echarts.init(document.getElementById("container"));
	// 进行相关项的设置，也就是所谓的搭搭骨架，方便待会的ajax异步的数据填充
	var option = {
		title: {
			text: '姓名年龄分布图'
		},
		tooltip: {
			show: true    //标题
		},
		legend: {
			data: ['age']    // 图例
		},
		xAxis: [{
			data: names   // 数据
		}],
		yAxis: [{
			type: 'value'
		}],
		series: [{
			"name": "age",
			"type": "line",
			"data": ages    //数据
		}]
	};

	// 将配置项赋给chart对象，来显示相关的数据
	mychart.setOption(option);


&lt;/script&gt;
	 </pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}

<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/echarts.js"></script>
<script language="javascript">

	// 初始化两个数组，盛装从数据库中获取到的数据

	var names = [];
	var ages = [];

	// console.log('查看1');
	// console.log(this.names);  可以看到全局函数
	//调用ajax来实现异步的加载数据
	function getusers() {
		$.ajax({
			type: "post",
			async: false,
			url: "../../js/Index2/index",
			//url: "../../Index2/index",
			data: {},
			dataType: "json",
			success: function (result) {
				//console.log(result);
				//json 对象转数组  {"name":["何发给1","何发给1","何发给13stt","何发给13stt","何发给13stt","何发给","何发给"],"age":[100,100,100,25,100,100,100]}
				
				var dxnames = result['name'];   // 这是对象
				var dxage = result['age'];   // 这是对象
				for (var i = 0; i < dxnames.length; i++) {
					names.push(dxnames[i]);            //添加到 叫names 的对象里去
				}
				for (var i = 0; i < dxage.length; i++) {
					ages.push(dxage[i]);
				}
				// var dxnames = result['name'][0];   // 这是对象 转字符串
				// var names =  JSON.parse(dxnames);   无法对象转数组
			}
		});
		//ajax 调用数据结束


		console.log('错wu');
		console.log(names);
		console.log(ages);
		// console.log(typeof(names)); 这里应该是对象 
		return names, ages;

	}
	// 执行异步请求
	getusers();
	//文档全部加载之后再运行函数
	$(document).ready(function(){


	// 初始化 图表对象
	var mychart = echarts.init(document.getElementById("container"));
	// 进行相关项的设置，也就是所谓的搭搭骨架，方便待会的ajax异步的数据填充
	var option = {
		title: {
			text: '姓名年龄分布图'
		},
		tooltip: {
			show: true    //标题
		},
		legend: {
			data: ['age']    // 图例
		},
		xAxis: [{
			data: names   // 数据
		}],
		yAxis: [{
			type: 'value'
		}],
		series: [{
			"name": "age",
			"type": "line",
			"data": ages    //数据
		}]
	};

	// 将配置项赋给chart对象，来显示相关的数据
	mychart.setOption(option);
});

</script> {/block}